<template>
    <div>
        <el-dialog
            :title="model.id == null?dialogTitle +  '新增数据' : dialogTitle +  '修改数据'"
            :visible.sync="this.$parent.drawerFlag"
            :width="dialogSize"
            center
            :close-on-click-modal="false"
            :destroy-on-close="false"
            ref="dialog-ref"
            @closed="close"
            :before-close="handleClose">
            <slot name="default"></slot>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submit" :loading="btnLoading" v-if="submitBtnFlag">确 定</el-button>
                    <el-button @click="handleClose">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "tyAddUpdate",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        submitBtnFlag: {
            type: Boolean,
            default: true
        },
        model: {type: Object },
        addApi : Function,
        updateApi:Function,
        submitBefor:{
            type: Function,
            default: ()=>{return true}
        },
        beforeHandler : Function,
        catchFormData : Function,
        dialogSize: {
            type: String,
            default: '50%'
        },
        dialogTitle:{
            type:String,
            default:'',
        }
    },
    data() {
        return {
            formComponent: null,
            data : JSON.parse(JSON.stringify(this.model)),
            btnLoading:false,
        }
    },
    methods: {
        getFormComponent(){
            if(this.formComponent == null){
                var children = this.$refs['dialog-ref'].$children
                return (children.filter(o=> o._vnode.tag == 'form' ))[0]
            }
            return this.formComponent
        },
        submit() {
            this.formComponent = this.getFormComponent()
            if( !this.submitBefor()){
                return false
            }
            this.formComponent.validate((valid) => {
                if (valid) {
                    if(this.beforeHandler != null){
                        this.beforeHandler(this.model)
                    }
                    this.btnLoading = true;
                    (this.model.id ? this.updateApi :  this.addApi)(this.model).then(res=>{
                        this.$message({
                            message: this.model.id == null ? '添加成功' : '修改成功',
                            type: 'success'
                        });
                        // 刷新表单
                        this.$parent.refreshData()
                        // 成功回调
                        this.$parent.closeDialogPage();
                    }).catch(()=>{
                        if (this.catchFormData){
                            this.catchFormData(this.model)
                        }
                    }).finally(()=> this.btnLoading = false)
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$parent.closeDialogPage();
        },
        close(){
            this.$parent.updateData(this.model , this.data)
        }
    },
    created() {

    }
}
</script>

<style scoped>

.dialog-footer{

}

</style>
